<template>
  <div class="text-left">
    <el-card class="box-card">
      <h3>寄件</h3>
      <el-divider></el-divider>

      <div>
        <div>
          <label>寄件人：</label><i>{{order.senderName}}</i> <label class="ml-5">电话：</label
          ><i>{{order.senderPhone}}</i>
        </div>
        <div><label>地址：</label><i>
          <el-cascader
            size="large"
            :options="options1"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
          <el-input v-model="order.senderAddress" class="w-25"></el-input>
          </i></div>
      </div>
      <el-divider></el-divider>
      <div>
        <div>
          <label>收件人：</label><i>{{order.receiverName}}</i> <label class="ml-5">电话：</label
          ><i>{{order.receiverPhone}}</i>
        </div>
        <div><label>地址：</label><i>
               <el-cascader
            size="large"
            :options="options1"
            v-model="selectedOptions1"
            @change="handleChange1"
          >
          </el-cascader>
          <el-input v-model="order.receiverAddress" class="w-25"></el-input>
        </i></div>
      </div>
    </el-card>

    <el-card class="box-card mt-3">
      <div>
        <label
          >上门取件时间：

          <el-date-picker v-model="order.estimatedArrivalTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </label>
      </div>
      <br />
      <div>
        <label
          >物品信息：

          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </label>
      </div>
      <br />
      <div>
        <label
          >付款方式：
          <el-radio-group v-model="order.paymentMethod" class="mt-1">
            <el-radio :label="1">寄方付</el-radio>
            <el-radio :label="2">到付</el-radio>
          </el-radio-group>
        </label>
      </div>
      <br>
      <div>
        <label>预估价格：<i>{{order.amount}}</i></label>
      </div>
    </el-card>
    <el-button type="success" class="mt-3 ml-5">下单</el-button>
  </div>
</template>

<script>
import { regionData,CodeToText } from "element-china-area-data";

export default {

 data() {
      return {
        options1: regionData,
      selectedOptions: [],
      selectedOptions1:[],
        order:{
          senderName:'张三',
          senderPhone:'154545454554',
          senderProvinceId:'',
          senderCityId:'',
          senderCountyId:'',
          senderAddress:'',
          receiverName:'李四',
          receiverPhone:'1154555555445',
          receiverProvinceId:'',
          receiverCityId:'',
          receiverCountyId:'',
          receiverAddress:'',
          paymentMethod:1,
          amount:0,
          estimatedArrivalTime:'',
        },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
    methods:{
       handleChange (value) {
        console.log(CodeToText[value[0]]+','+CodeToText[value[1]]+','+CodeToText[value[2]]) 
        this.order.senderProvinceId=CodeToText[value[0]]
        this.order.senderCityId=CodeToText[value[1]]
        this.order.senderCountyId=CodeToText[value[2]]
      },
       handleChange1 (value) {
        this.order.receiverProvinceId=CodeToText[value[0]]
        this.order.receiverCityId=CodeToText[value[1]]
        this.order.receiverCountyId=CodeToText[value[2]]
      }
    }

};
</script>

<style>
</style>